<template>
	<view class="order-main" @tap="click">
		<!-- <view class="goods__tag" v-show="tag"><image class="tag-img" :src="tag" mode="widthFix"></image></view> -->
		<view class="main-img">
			<view v-if="order.replenish" class="replenish_text" style="width:100%;height:100%;overflow:hidden; ">
				{{order.replenishcont.lastIndexOf("-")!=-1?order.replenishcont.substring(order.replenishcont.lastIndexOf("-")+1):order.replenishcont}}
			</view>
			<image v-else style="width:100%;height:100%;"  lazy-load fade-show :src="order.params.image" mode="aspectFill"></u-image>
		</view>
		
		<view>
			<view class="main-info">
				<view class="main-info-title">
					<view v-if="order.replenish" >
						{{ order.params.title }} - {{order.replenishcont.lastIndexOf("-")!=-1?order.replenishcont.substring(order.replenishcont.lastIndexOf("-")+1):order.replenishcont}}
					</view>
					<view v-else>{{ order.params.title }}</view>
				</view>
				<text>套餐:{{order.params.detail}}
				</text>
				<view v-if="!order.replenish">
					<!-- <text v-if="order.leaseTerm == 30">租期:{{order.leaseTerm}}天</text> -->
					<!-- <text v-else-if="order.leaseTerm == 24">租期:{{order.leaseTerm }}周</text> -->
					<!-- <text v-else>租期:{{order.leaseTerm}}期/月</text> -->
				</view>
				
				<view class="main-info-price">
					<!-- <text v-if="order.replenish">数量 × 1</text> -->
					<text>数量 × {{ order.params.saleQuantity }}</text>
				</view>
				
				<view class="main-info-price">
					<text v-if="!order.replenish"> 金额:￥
					<text style="font-weight:700">{{(order.params.model.price/100).toFixed(2)}}</text>
					
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 商品小卡片
 * @property {String} title - 标题
 * @property {String} subtitle - 副标题
 * @property {String} image - 图片地址
 * @property {String} describe - 描述信息
 * @property {String | Number} price - 价格
 * @property {String | Number} originPrice - 原价
 * @property {String} tag - 商品标签
 * @property {Number} number - 商品数量
 * @event {Function} click - 点击卡片
 */
export default {
	components: {},
	data() {
		return {};
	},
	props:['order'],
	computed: {},
	created() {},
	methods: {
		click() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
.goods-box {
	position: relative;
	.goods__tag {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		.tag-img {
			width: 60rpx;
		}
	}
	.goods_img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 6rpx;
	}
	.goods-title {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		width: 450rpx;
		line-height: 40rpx;
	}

	.describe-text {
		font-size: 24rpx;
		width: 450rpx;
		color: #a8700d;
	}

	.price {
		color: $u-type-error;
		font-weight: 600;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
	.origin-price {
		color: $u-type-info-disabled;
		font-size: 24rpx;
		text-decoration: line-through;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
}

.order-main{
    width: 100%;
    height: 280rpx;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.main-img {
    width: 180rpx;
    height: 180rpx;
    border: 1rpx solid #eee;
}
.replenish_text {
	display: flex;
	align-items: center;
	justify-content: center;
    background: #0081FF;
}

.main-info {
    flex: 1;
    height: 240rpx;
    margin-left:60rpx;
    font-size: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    color: #727272;
    display: flex;
    
    flex-direction: column;
    justify-content: space-between;
}
.main-info-title {
    width: 100%;
    /* text-align: center; */
    text-align: left;
    font-size: 30rpx;
    font-weight: 600;
}
.main-info-price {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
</style>
